<template>
  <div>
    <div class="nav">
      <div @click="back" class="icon"><van-icon name="arrow-left" /></div>
      <div class="add">添加地址</div>
      <div>&nbsp;</div>
      </div>
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :contact-info="editingContact"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
  </div>
</template>

<script>
import { Toast } from 'vant';
import { areaList } from '@vant/area-data'
export default {
  data() {
    return {
      areaList,
      searchResult: [],
      editingContact: []
    }
  },
  methods:{
    back(){
      this.$router.go(-1)
    },
    onSave(contactInfo) {
      Toast('保存成功');
      let addressId = new Date().getTime()
      let addressList = JSON.parse(localStorage.addressList || '[]')
      if(contactInfo.isDefault){
        let defaultAddress = addressList.filter(k => k.contactInfo.isDefault)[0]
        console.log(defaultAddress);
        if(defaultAddress){
          let address = {
            addressId: defaultAddress.addressId,
            contactInfo: {
              addressDetail: defaultAddress.contactInfo.addressDetail,
              areaCode:defaultAddress.contactInfo.areaCode,
              city: defaultAddress.contactInfo.city,
              country: defaultAddress.contactInfo.country,
              county: defaultAddress.contactInfo.county,
              isDefault: false,
              name: defaultAddress.contactInfo.name,
              postalCode: defaultAddress.contactInfo.postalCode,
              province: defaultAddress.contactInfo.province,
              tel: defaultAddress.contactInfo.tel
            },
            isSelect: false
          }
          addressList = [address, ...addressList.filter(k => k.addressId != defaultAddress.addressId)]
          localStorage.addressList = JSON.stringify(addressList)
        }
        let address = {
          addressId,
          contactInfo: contactInfo,
          isSelect: false
        }
        addressList = [address, ...addressList.filter(k => k.addressId != addressId)]
        localStorage.addressList = JSON.stringify(addressList)
      }else{
        let address = {
          addressId,
          contactInfo: contactInfo,
          isSelect: false
        }
        addressList = [address, ...addressList.filter(k => k.addressId != addressId)]
        localStorage.addressList = JSON.stringify(addressList)
      }

      this.$router.go(-1)
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '天河体育中心',
            address: '天河',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.nav{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .icon{
        margin-left: 10px;
    }
    .add{
        margin-right:15px;
    }
   
}

</style>